<template>
    <div>
        <div class="data-picker" @click="datetime.show = true">{{ time }}</div>
        <van-popup
            :show="datetime.show"
            @clickOverlay.native="closePopup"
            round
            position="bottom"
            custom-style="height: 40%; width:100%"
        >
            <van-datetime-picker
                type="year-month"
                :title="time"
                :visible-item-count="3"
                :value="datetime.currentDate"
                @confirm.native="selectTime"
                @cancel.native="closePopup"
            />
        </van-popup>
    </div>
</template>

<script>
import vanPopup from "@/wxcomponents/weapp/dist/popup/index";
import vanDatetimePicker from "@/wxcomponents/weapp/dist/datetime-picker/index";
export default {
    components: { vanDatetimePicker, vanPopup },
    props: ["currentDate"],
    data() {
        return {
            datetime: {
                show: false,
                currentDate: new Date().getTime(),
            },
        };
    },
    computed: {
        time() {
            const date = new Date(this.datetime.currentDate);
            return `${date.getFullYear()}-${date.getMonth() + 1}`;
        },
    },
    methods: {
        closePopup() {
            this.datetime.show = false;
        },
        selectTime({ detail }) {
            this.datetime.currentDate = detail;
            this.$emit("select", detail);
            this.closePopup();
        },
    },
};
</script>

<style lang="less" scoped>
.data-picker {
    width: fit-content;
    padding: 8rpx 64rpx;
    border-radius: 32rpx;
    box-shadow: 0 8px 12px #ebedf0;
}
</style>
